@charset "UTF-8";
.calendar_all{
  position: relative;
  z-index: 2;
  .calendar_box{
    width: 270px;
    border: #eee solid 1px;
    padding: 10px;
    position: relative;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: #fff;

    &:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}

    .calendar_prev,.calendar_next{
      display: inline-block;
      line-height: 40px;
      padding: 0 8px;
      font-size: 20px;
      position: absolute;
      top: 8px;
      cursor: pointer;
      z-index: 3;
    }
    .calendar_prev{
      left: 0;
    }
    .calendar_next{
      right: 0;
    }

    .calendar_month{
      width: 100%;
    }
    .calendar_header{
      height: 40px;
      position: relative;
      p{
        text-align: center;
        margin: 0;
        line-height: 40px;
        font-weight: bold;
        font-size: 16px;
      }
      
    }
    .calendar_content{
      position: relative;
      .week_box{
        span{
          float: left;
          width: 14.28%;
          min-height: 40px;
          line-height: 40px;
          text-align: center;
          font-weight: bold;
          font-size: 14px;
          color: #666;
          
          box-sizing: border-box;
          //margin: -1px 0 0 -1px;
          background-color: #f5f5f5;
        }
      }
      .day_content{
        .day_list{
          float: left;
          width: 14.28%;
          height: 0;
          padding-bottom: 14.28%;
          
          box-sizing: border-box;
          //margin: -1px 0 0 -1px;
          position: relative;
          -webkit-transition:all 0.2s linear 0s;
          transition:all 0.2s linear 0s;
          .day_box{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            font-size: 14px;
            .day{
              display: block;
              width: 100%;
              height: 100%;
              text-align: center;
              line-height: 36px;
            }
          }
        }
        .has_date{
          cursor: pointer;
        }
        .today{
          //background-color: rgba(255,102,0,0.2);
          background-color: rgba(27,188,157,0.06);
          color: #1bbc9d;
          .day{
            //font-weight: bold;
          }
        }
        .dateInterval{
          background-color: #eaeaea;
        }
        .dateIntervalEnd{
          background-color: #c7c9c9;
        }
        .active{
          background-color: #1bbc9d;
          color: #fff;
        }
        .willActive{
          background-color: rgba(27,188,157,0.5);
          color: #fff;
        }
        .active.willActive{
          background-color: rgba(27,188,157,0.5);
          //background-color: rgba(27,188,157,0.2);
          color: #333;
        }
        .active.willDel{
          background-color: rgba(255,16,16,0.2);
          //background-color: rgba(27,188,157,0.2);
          color: #333;
        }
        .cal_disabled{
          background-color: rgba(0,0,0,0.035);
          color: #999;
          cursor: default;
        }
        .other_month{
          border: #f60 solid 1px;
        }
        .now_month{
          border: #f60 solid 1px;
        }
        
        
        &:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}
      }
    }
    .calendar_loading{
      position: absolute;
      left: -1px;
      top: -1px;
      width: 100.2%;
      height: 100.2%;
      padding: 40% 46% 50%;
      box-sizing: border-box;
      background-color: rgba(255,255,255,0.5);
      .path{
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90,150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #409eff;
        stroke-linecap: round;
      }
    }
  }
  .calendar_mini{
    width: 270px;
    .calendar_content{
      .day_content{
        .cal_disabled{
          background:none;
          color: #999;
          cursor: default;
        }
        span{
          text-align: center;
          line-height: 32px;
          border: none;
        }
        
      }
    }
  }
  .calendar_mini_double{
    width: 540px;
    .calendar_month{
      float: left;
      width: 49%;
      margin-left: 2%;
      &:nth-child(3){
        margin-left: 0;
      }
    }
    .calendar_content{
     .week_box{
       span{
         border: none;
       }
     }
     .day_content{
      .cal_disabled{
        background:none;
        color: #999;
        cursor: default;
      }
       .day_list{
         border: none;
       }
       
     }
    }
    
 }

 //大双日历
 .calendar_big,.calendar_big_double{
  width: 600px;
  .calendar_month{
    
  
    .calendar_content{
      border-left: 1px solid #e3e3e3;
      border-top: 1px solid #e3e3e3;
      .week_box{
        span{
          border-right: 1px solid #e3e3e3;
          border-bottom: 1px solid #e3e3e3;
        }
      }
      .day_content{
        .day_list{
          border-right: 1px solid #e3e3e3;
          border-bottom: 1px solid #e3e3e3;
          font-size: 28px;
          .day{
            width: auto;
            height: auto;
            line-height: 24px;
            text-align: left;
            display: inline-block;
            margin-left: 15px;
            margin-top: 5px;
          }
          
        }
      }
    }
  }
}
 .calendar_big_double{
  width: 1000px;
  .calendar_month{
    float: left;
    width: 49%;
    margin-left: 2%;
    &:nth-child(3){
      margin-left: 0;
    }
  }
    // width: 740px;
    // .calendar_month{
    //   float: left;
    //   width: 49%;
    //   margin-left: 2%;
    //   &:nth-child(3){
    //     margin-left: 0;
    //   }
    
    //   .calendar_content{
    //     border-left: 1px solid #e3e3e3;
    //     border-top: 1px solid #e3e3e3;
    //     .week_box{
    //       span{
    //         border-right: 1px solid #e3e3e3;
    //         border-bottom: 1px solid #e3e3e3;
    //       }
    //     }
    //     .day_content{
    //       .day_list{
    //         border-right: 1px solid #e3e3e3;
    //         border-bottom: 1px solid #e3e3e3;
    //       }
          
    //     }
    //   }
    // }
  }
  
}
.calendar_abs{
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  z-index: 99;
  box-shadow: 0 1px 10px rgba(0,0,0,0.2);
}

